<!DOCTYPE html>
<html>

<head>

    <!--QQ音乐动态首页-->

    <meta charset="utf-8">
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="icon" href="QQMusic.png">
    <title>QQ音乐</title>
</head>

<body>
    <!-- 总头部-->
    <header class="global-header">
        <!--logo-->
        <section class="top-nav flex">
            <div class="qq-music">
                <div class="logo"></div>
            </div>
            <nav class="top">
                <ul class="flex top-ul">
                    <li class="t-item"><a href="#" class="top-a">音乐馆</a></li>
                    <li class="t-item"><a href="#" class="top-a">我的音乐</a></li>
                    <li class="t-item"><a href="#" class="top-a">客户端</a></li>
                    <li class="t-item"><a href="#" class="top-a">音乐号</a></li>
                    <li class="t-item"><a href="#" class="top-a">VIP</a></li>
                    <li class="search-wapper flex">
                        <input type="text" class="search" placeholder="搜索音乐、MV、歌单、用户">
                        <button class="search-but">
                            <div class="but-logo auto"></div>
                        </button>
                    </li>
                    <li class="login-link"><a href="#" class="login font-a">登陆</a></li>
                    <li class="green-link"><a href="#" class="green">开通绿钻豪华版</a></li>
                    <li class="bag-link"><a href="#" class="bag">开通付费包</a></li>
                </ul>

            </nav>
        </section>
        <nav class="sub-nav auto">
            <ul class="flex sub-ul">
                <li class="s-item"><a href="#" class="sub-a homepage font-a">首页</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">歌手</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">新碟</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">排行榜</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">分类歌单</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">电台</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">MV</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">数字专辑</a></li>
                <li class="s-item"><a href="#" class="sub-a font-a">票务</a></li>
            </ul>
        </nav>
    </header>
    <section class="body">
        <!--歌单推荐-->
        <div class="bg">
            <section class="lists auto">
                <h2 class="lists-h2">歌单推荐</h2>
                <ul class="flex lists-ul auto">
                    <li class="lists-item"><a href="#" class="font-a lists-a">为你推荐</a></li>
                    <li class="lists-item"><a href="#" class="font-a lists-a">官方歌单</a></li>
                    <li class="lists-item"><a href="#" class="font-a lists-a">情歌</a></li>
                    <li class="lists-item"><a href="#" class="font-a lists-a">网络歌曲</a></li>
                    <li class="lists-item"><a href="#" class="font-a lists-a">经典</a></li>
                    <li class="lists-item"><a href="#" class="font-a lists-a">KTV热曲</a></li>
                </ul>

                <ul class="pages">
                    <li class="page flex auto">
                        <a class="one-wapper" href="#">
                            <div class="page-img page1-1 flex">
                                <div class="play"></div>
                            </div>
                            <p class="page-p1 font-a">我也曾难过，但我没敢说</p>
                            <p class="page-p2 font-a">播放量：5742</p>
                        </a>

                        <a class="one-wapper" href="#">
                            <div class="page-img page1-2 flex">
                                <div class="play"></div>
                            </div>
                            <p class="page-p1 font-a">京阿尼动画作品原声精选</p>
                            <p class="page-p2 font-a">播放量：40.7万</p>
                        </a>

                        <a class="one-wapper" href="#">
                            <div class="page-img page1-3 flex">
                                <div class="play"></div>
                            </div>
                            <p class="page-p1 font-a">【入耳沉醉】 猝不及防的心动</p>
                            <p class="page-p2 font-a">播放量：222.5万</p>
                        </a>

                        <a class="one-wapper" href="#">
                            <div class="page-img page1-4 flex">
                                <div class="play"></div>
                            </div>
                            <p class="page-p1 font-a">做个酷女孩！独自去旅行</p>
                            <p class="page-p2 font-a">播放量：4.1万</p>
                        </a>

                        <a class="one-wapper" href="#">
                            <div class="page-img page1-5 flex">
                                <div class="play"></div>
                            </div>
                            <p class="page-p1 font-a">私荐 ：随性自由的黑人之声</p>
                            <p class="page-p2 font-a">播放量：1.6万</p>
                        </a>

                    </li>
                </ul>
                <ul class="hidden-ul auto flex">
        <li class="h-li flex">
            <a class="one-wapper" href="#">
                <div class="page-img page1-1 flex">
                    <div class="play"></div>
                </div>
                <p class="page-p1 font-a">我也曾难过，但我没敢说</p>
                <p class="page-p2 font-a">播放量：5742</p>
            </a>

            <a class="one-wapper" href="#">
                <div class="page-img page1-2 flex">
                    <div class="play"></div>
                </div>
                <p class="page-p1 font-a">京阿尼动画作品原声精选</p>
                <p class="page-p2 font-a">播放量：40.7万</p>
            </a>
        </li>
        <li class="h-li flex">
            <a class="one-wapper" href="#">
                <div class="page-img page1-3 flex">
                    <div class="play"></div>
                </div>
                <p class="page-p1 font-a">【入耳沉醉】 猝不及防的心动</p>
                <p class="page-p2 font-a">播放量：222.5万</p>
            </a>

            <a class="one-wapper" href="#">
                <div class="page-img page1-4 flex">
                    <div class="play"></div>
                </div>
                <p class="page-p1 font-a">做个酷女孩！独自去旅行</p>
                <p class="page-p2 font-a">播放量：4.1万</p>
            </a>

        </li>
                </ul>
            </section>
        </div>
        <!--新歌首发-->
        <div class="bg">
            <section class="new auto">
                <section class="new-font auto">
                    <h2 class="lists-h2">新歌首发</h2>
                    <ul class="flex lists-ul auto">
                        <li class="lists-item"><a href="#" class="font-a lists-a">最新</a></li>
                        <li class="lists-item"><a href="#" class="font-a lists-a">内地</a></li>
                        <li class="lists-item"><a href="#" class="font-a lists-a">港台</a></li>
                        <li class="lists-item"><a href="#" class="font-a lists-a">欧美</a></li>
                        <li class="lists-item"><a href="#" class="font-a lists-a">韩国</a></li>
                        <li class="lists-item"><a href="#" class="font-a lists-a">日本</a></li>
                    </ul>
                </section>
                <section class="sec auto flex">
                    <section class="secleft flex">
                        <section class="small flex">
                            <div class="new-img img1"></div>
                            <div class="sec-p">
                                <p class="secp1 font-a">Cabinet</p>
                                <p class="secp2 font-a">효민 (孝敏) / JustaTee</p>
                            </div>
                        </section>
                        <section class="small flex">
                            <div class="new-img img2"></div>
                            <div class="sec-p">
                                <p class="secp1 font-a">Gone</p>
                                <p class="secp2 font-a">Chali XCX /Christine and..</p>
                            </div>
                        </section>
                        <section class="small flex">
                            <div class="new-img img3"></div>
                            <div class="sec-p">
                                <p class="secp1 font-a">Can you feel</p>
                                <p class="secp2 font-a">Pentanix</p>
                            </div>
                        </section>
                    </section>
                    <section class="secright flex">
                        <section class="small flex">
                            <div class="new-img img4"></div>
                            <div class="sec-p">
                                <p class="secp1 font-a">解忧宸汐缘电视...</p>
                                <p class="secp2 font-a">张靓颖</p>
                            </div>
                        </section>
                        <section class="small flex">
                            <div class="new-img img5"></div>
                            <div class="sec-p">
                                <p class="secp1 font-a">West Coast</p>
                                <p class="secp2 font-a">Yultron / 박재범 (朴宰范)..</p>
                            </div>
                        </section>
                        <section class="small flex">
                            <div class="new-img img6"></div>
                            <div class="sec-p">
                                <p class="secp1 font-a">慢半拍</p>
                                <p class="secp2 font-a">薛之谦</p>
                            </div>
                        </section>
                    </section>


                </section>
            </section>
        </div>
        <!--精彩推荐-->
        <div class="bg ">

            <section class="auto-play auto">
                <h2 class="lists-h2">精彩推荐</h2>
                <div class="container auto">
                    <div class="photos flex">
                        <a href="#"><img src="image/auto-zhang.jpg" alt="zhang"></a>
                    <a href="#"> <img src="image/auto-mo.jpg" alt="mo"></a>
                <a href="#"> <img src="image/auto-duan.jpg" alt="duan"></a>
            <a href="#"> <img src="image/auto-love.jpg" alt="love"></a>
                    </div>
                </div>
            </section>

            <section class="hovering">
            </section>
        </div>
    </section>
</body>

</html>